/**
 * @file Time Picker Header
 * @author leon <ludafa@outlook.com>
 */

@require '../css/variable.styl'

.sm-time-picker-header
    display: flex
    position: relative;
    align-items: center
    justify-content: space-between
    height: 120px
    width: 174px
    font-size: 58px
    // font-family: Roboto, Lato,
    line-height: 1
    color: #fff

    >b
        margin: 0 10px

    &-text
        color: rgba(#fff, .7)
        cursor: pointer;
        &.state-selected
            color: #fff

    &-meridiem
        position: absolute;
        display: flex
        flex-direction: column
        font-size: 16px
        margin-left: 12px
        left: 100%
        bottom: 36px
        font-weight: 400
        color: rgba(#fff, .7)

        >span
            line-height: 20px
            cursor: pointer;

        .state-active
            color: #fff

.variant-time-picker .sm-dialog-title
    padding: 0
    display: flex
    align-items: center
    justify-content: center
    background-color: $md-colors.blue500
